<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table</title>
	<style>
		table {
			border-collapse: collapse;
			vertical-align: center;
			text-align: center;
		}
		
		td {
			padding: 20px 50px;
		}
		
		tr:nth-child(odd) {
			background-color: #e6e6e6;
		}
		
		#box {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100dvh;
		}
	</style>
</head>
<body>
	<div id="box">
		<div>
			<table border="1">
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
					<td></td>
				</tr>
			</table>
		</div>
	</div>
	
	<script>
		const table = document.querySelector('table')
		table.addEventListener('click', e => {
			if (e.target.tagName === 'TD')
				e.target.style.backgroundColor = '#333'
		})
	</script>
</body>
</html>